<template>
  <view class="account-security">
    <!-- 返回按钮 -->
    <tn-button 
      backgroundColor="tn-bg-left" 
      style="color: black; position: absolute; left: 5%; top: 10%; width: 35px; height: 35px; font-size: 25px;" 
      :border="false" 
      @click="handleReturn"
    >
      <text class="tn-icon-left"></text>
    </tn-button>

    <!-- 页面标题 -->
    <view class="page-title">账号安全</view>

    <!-- 安全设置列表 -->
    <view class="security-settings">
      <tn-list-view class="listView" :card="true" unlined="all" @clickTitle="handleClickTitle">
        <tn-list-cell @click="navigateToChangePassword">修改密码</tn-list-cell>
        <tn-list-cell @click="navigateToBindPhone">绑定手机</tn-list-cell>
        <tn-list-cell @click="navigateToBindEmail">绑定邮箱</tn-list-cell>
        <tn-list-cell @click="navigateToTwoStepAuth">启用两步验证</tn-list-cell>
      </tn-list-view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    // 返回设置页面
    handleReturn() {
      uni.navigateBack({ delta: 1 });
    },
    // 点击标题事件
    handleClickTitle() {
      console.log("标题点击事件");
    },
    // 跳转到修改密码页面
    navigateToChangePassword() {
      uni.navigateTo({
        url: '/pages/setUp/subpage/ChangePassword'
      });
    },
    // 跳转到绑定手机页面
    navigateToBindPhone() {
      uni.navigateTo({
        url: '/pages/setUp/subpage/BindPhone'
      });
    },
    // 跳转到绑定邮箱页面
    navigateToBindEmail() {
      uni.navigateTo({
        url: '/pages/setUp/subpage/BindEmail'
      });
    },
    // 跳转到启用两步验证页面
    navigateToTwoStepAuth() {
      uni.navigateTo({
        url: '/pages/setUp/subpage/TwoStepAuth'
      });
    }
  }
};
</script>

<style scoped>
.account-security {
  padding: 20px;
  background-color: #f5f5f5; /* 轻微灰色背景 */
  height: 100%;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
  color: #333;
  letter-spacing: 1px;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.security-settings {
  margin-top: 40px;
}

.listView {
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

tn-list-cell {
  padding: 15px 20px;
  font-size: 18px;
  color: #555;
  border-bottom: 1px solid #f1f1f1;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

tn-list-cell:last-child {
  border-bottom: none;
}

tn-list-cell:hover {
  background-color: #f0f0f0;
}

tn-list-cell:active {
  background-color: #e0e0e0;
}
</style>